<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>1+2=?</title>
	</head>
	<body>
		<p>数字1：</p>
		<input id="n1" type="text"/>
		<p>数字2：</p>
		<input id="n2" type="text"/>
		<!--按钮的点击事件：执行add函数-->
		<br />
		<br />
		<input id="btn" type="button" value="求和"  onclick="add()"/>
		
		<p id="sum"></p>
		
		<script>
			function add(){
				/* 1、获取2个文本框输入的内容
				   2、相加的结果放入 <p>*/
				  //获取元素对象
				  var num1=document.getElementById('n1');
				  var num2=document.getElementById('n2');
				  var sum=document.getElementById('sum');
				  //不管输入的是字符串还是数字，都会处理成string,所以变成字符串连接
				  var result=num1.value+num2.value;
				  
				  //强制类型转换1:parseInt()转成整形
				  //输入浮点数的话，会截断:1.5+5.6=6
				  //输入非数字的话，a+3=NaN
				  result=parseInt(num1.value)+parseInt(num2.value);
				  
				  //强制类型转换2：parsefloat()转成浮点型1.5+2.3=3.8
				  //输入非数字的话，1+a=NaN
				  result=parseFloat(num1.value)+parseFloat(num2.value);
				  //强制类型转换3：Number()
				  //输入整形浮点型都可以：3+3.3=6.3
				  //输入非数字的话，3a+3.3=NaN
				  result=Number(num1.value)+Number(num2.value);
				  //考虑用户输入不合法的情况，当用户输入非数字时，弹出提示框
				  if(isNaN(num1.value)){
				  	alert("第1个数字不合法,是非数字型")
				  }else if(isNaN(num2.value)){
				  	alert("第2个数字不合法,是非数字型")
				  }else{
				  	sum.innerHTML=(num1.value)+"+"+(num2.value)+"="+result;
				  }
				  
				  sum.innerHTML=(num1.value)+"+"+(num2.value)+"="+result;
			}
		</script>
	</body>
</html>
